<template>
  <div class="hotlist">
    <section class="bg">
      <div></div>
      <div></div>
      <div>{{ getTime() }}</div>
    </section>
    <ul>
      <NewSongs
        v-for="(item, index) in HotSong"
        :key="item.id"
        :item="item"
        :index="index"
        @click.native="$emit('hotSong', { item: item, HotSong: HotSong })"
        :playsong="playsong"
      />
    </ul>
  </div>
</template>

<script>
import NewSongs from "@/components/NewSongs.vue";
export default {
  props: ["playsong"],
  data: function () {
    return {
      HotSong: null,
    };
  },
  components: {
    NewSongs,
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/playlist/detail?id=3778678")
      .then((res) => {
        this.HotSong = res.data.playlist.tracks;
        this.HotSong=this.HotSong.slice(0, 20)
      });
  },
  methods: {
    getTime: function () {
      let getDate = new Date();

      let newDatas =
        getDate.getFullYear() +
        "年" +
        (getDate.getMonth() + 1) +
        "月" +
        getDate.getDate() +
        "日";
      return newDatas;
    },
  },
};
</script>

<style lang="less" scoped>
.hotlist {
  position: relative;
  top: 122px;
  .bg {
    background-image: url("../assets/bg.jpg");
    width: 100%;
    height: 145px;
    position: relative;
  

    div:nth-of-type(1) {
      position: absolute;
      left: -38px;
      top: -8px;
      width: 50px;
      height: 50px;
      background: url("../assets/icon.png") no-repeat -48px -60px;
      width: 283px;
      height: 133px;
      transform: scale(0.6);
    }
 
    div:nth-of-type(3) {
      position: absolute;
      bottom: 8px;
      color: white;
      margin-left: 18px;
      margin-top: 10px;
    }
  }
  ul {
    margin: 0;
    padding: 0;
  }
}
</style>